<div ng-controller="processDefinedCtrl">
  <div class="content" id="js-drop-zone">

    <div class="message intro">
      <div class="note">
        <span translate="process.diagram.operation.DROPBPMN">Drop BPMN diagram from your desktop or </span><a id="js-create-diagram" ng-click="createNewDiagram()" translate="process.diagram.operation.NEW">create a new diagram</a><span translate="process.diagram.operation.STARTDESC"> to get started.</span>
      </div>
    </div>

    <div class="message error">
      <div class="note">
        <p translate="process.diagram.message.error.NOTE">Ooops, we could not display the BPMN 2.0 diagram.</p>

        <div class="details">
          <span translate="process.diagram.message.error.DETAILS">cause of the problem</span>
          <pre></pre>
        </div>
      </div>
    </div>

    <div class="canvas" id="js-canvas"></div>
    <div id="js-properties-panel"></div>
  </div>

  <ul class="buttons">
    <li>
      <a ng-click="downloadDiagram()" translate="process.diagram.operation.ACTIVE">active</a>
    </li>
    <li>
      <a ng-click="deploy()" translate="process.diagram.operation.DEPLOY">deploy</a>
    </li>
    <li>
      <a ng-click="save()" translate="process.diagram.operation.SAVE">save</a>
    </li>
    <!-- <li>
      <a ng-click="load()" translate="process.diagram.operation.LOAD">load</a>
    </li> -->
    <li>
      <a id="js-download-diagram" title="download BPMN diagram" translate="process.diagram.operation.DOWNLOAD">
        BPMN diagram
      </a>
    </li>
    <li>
      <a id="js-download-svg" title="download as SVG image" translate="process.diagram.operation.DOWNLOADASSVG">
        SVG image
      </a>
    </li>
  </ul>
</div>